<template>
	<view class="container">
		<image style="width:100%;height: 100vh;overflow: hidden;" src="../../static/images/invitae_bg.png"
			mode="scaleToFill"></image>
		<su-navbar class="title" title="" statusBar color="" backgroundColor="" opacityBgUi="" />
		<image @longpress="save" :src="codeUrl" class="qrcode" mode="aspectFit"></image>
		<!-- <view class="title">邀请码</view> -->
		<!-- 	<uni-nav-bar style="z-index: 100" left-icon="left" backgroundColor="transparent" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
		</uni-nav-bar> -->
		<!-- <view class="invitation" :style="customStyle">
			<image @longpress="save" :src="codeUrl" class="qrcode" mode="aspectFit"></image>
		</view> -->

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		downloadImage
	} from '@/sheep/helper/index'
	const codeUrl = ref('')
	const customStyle = ref('')
	const getElementStyle = () => {
		const systemInfo = uni.getSystemInfoSync()

		let windowWidth = systemInfo.windowWidth

		let styleObj = {
			width: windowWidth - 2 * 10 + 'px',

		}
		customStyle.value = styleObj
	}
	const onClickNavBack = () => {
		uni.navigateBack()
	}

	//长按二维码
	const save = (e) => {
		console.log('长按二维码', e);
		downloadImage(codeUrl.value, '')
	}
	let userInfo = {}
	onShow(() => {

		//获取用户信息
		userInfo = uni.getStorageSync('userInfo')
		codeUrl.value =
			`http://47.108.151.86:5790/jeecg-boot/sys/common/static/${userInfo.codeFilePath}`
		getElementStyle()


	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #000000;
		height: 100%
	}

	.container {
		overflow: hidden;
		position: relative;
		// height: 100%;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		// padding: 10px;
		// box-sizing: border-box;
		width: 100%;
		height: 100vh;
		/* 或根据需要设置具体高度 */
		// background-image: url('@/static/images/invitae_bg.png');
		// background-size: cover;
		/* 确保背景图完全覆盖容器 */
		// background-position: center;
		/* 背景图居中 */
		// background-repeat: no-repeat;
		/* 避免重复背景图 */
	}

	.title {
		position: fixed;
		color: white;
		top: 30px;
		font-size: 20px;
		font-weight: bold;
	}

	.qrcode {

		width: 100px;
		height: 100px;
		position: absolute;
		bottom: 18%;
		left: 50%;
		transform: translateX(-50%);
	}

	// .invitation {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;

	// 	aspect-ratio: 1 / 1;
	// 	background-image: url('@/static/images/invitation_bg.png');
	// 	background-size: cover;
	// 	/* 让背景图铺满并保持比例 */
	// 	background-position: center;
	// 	/* 背景图居中显示 */
	// 	background-repeat: no-repeat;

	// 	/* 避免背景图重复 */
	// 	.qrcode {
	// 		width: 50%;
	// 		height: 50%;
	// 	}
	// }
</style>